<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
		<style>
			body{
				margin: 0; /*去掉外边距*/
				background-image: url("imgs/bg.jpg");
				background-size: cover;/*设置封面*/
				text-align: center;/*页面内部的文本居中(图片和h1 h2居中)*/
			}
			h1{
				font-size: 72px;
				color: #0096dc;
				margin-bottom: 0;
			}
			img{
				width: 100px;
			}
			h2{
				font-size: 32px;
				color: #0096dc;
				margin-bottom: 0;
			}
		</style>
	</head>
	<body>
		<div id="login">
			<h1>欢迎来到酷鲨商城</h1>
			<img src="imgs/shark.png">
			<h2>CoolSharkMall</h2>
			<el-card style="width: 600px; height: 300px; margin:0 auto;background-color: rgba(255,255,255, 0.3);">
				<!--  通过在 el-form 上添加 ref="ruleForm2"，你可以在 Vue 组件的方法中使用 this.$refs.ruleForm2 来访问 el-form 的实例。
				在validatePass  方法中使用this.$refs.ruleForm2.validateField('checkPass');来验证密码。-->
				<!-- status-icon表示是否在输入框中显示校验结果反馈图标,  rules表示校验规则 。 
				:model=ruleForm2是指定表单总体对应的数据，表单项中的prop用来对应此整体数据中的一个数据项-->
				<el-form :model="ruleForm2" status-icon  :rules="rules2"  ref="ruleForm2" label-width="60px"  
					style="width: 400px;margin: 50px auto;">
				  <el-form-item label="用户名" prop="username">
				    <el-input type="text" v-model="ruleForm2.username" placeholder="请输入用户名" auto-complete="off"></el-input>
				  </el-form-item>
				  <el-form-item label="密码" prop="pass">
				    <el-input type="password" v-model="ruleForm2.pass" placeholder="请输入密码" auto-complete="off"></el-input>
				  </el-form-item>
				  <el-form-item><!--  position: relative;right: 30px;是距离右边按钮30px  -->
				    <el-button type="primary" style="position: relative;right: 30px;" @click="submitForm('ruleForm2')">登录</el-button>
				    <el-button @click="resetForm('ruleForm2')">重置</el-button>
				  </el-form-item>
				</el-form>
			</el-card>
		</div>
	</body>
	<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
	<script>
		var validatePass= (rule,value,callback)=>{
			if (value === '') {
			    callback(new Error('请输入密码'));
			}else if(value.toString().length<5 || value.toString().length>18){
				callback(new Error('密码长度为5-18个字符'));
			}/* else {
			    if (this.ruleForm2.checkPass !== '') {
				    this.$refs.ruleForm2.validateField('checkPass');
			    }
			    callback();
			} */else{
				callback();
			}
		};
		
		
		var let=new Vue({
			el: "#login",
			data: function(){
				return {
					ruleForm2: {
						pass:'',
					    username: '',
					    checkPass: ''
					},
					rules2: {
					    pass: [
						    { validator: validatePass, trigger: 'blur' },
							//rules2中使用validatePass方法来校验密码
					    ]
					}
				}
			},
			methods: {
				submitForm(formName){
					this.$refs[formName].validate((valid) => {
					    if (valid) {
						  alert('submit!');
					    } else {
						  console.log('error submit!!');
						  return false;
					    }
					});
				},
				resetForm(formName){
					this.$refs[formName].resetFields();
				}
			}
		});
	</script>
</html>
